<template>
  <div>
    <div class="searchResult">
      <div class="header flex around ">
        <div class="position flex"
             @click="cityShow =true">
          <img src="../../assets/image/location.png"
               width="15"
               height="20">
          <span class="ml10 fz28">{{city}}</span>
        </div>
        <group class="search flex start"
               gutter=0>
          <x-input v-model="hotelName"
                   placeholder="酒店名称"
                   @on-change='submit'>
            <img src="../../assets/image/search.png"
                 class="mr20"
                 width="15"
                 height="15"
                 slot="label">
          </x-input>
        </group>
      </div>
      <div :class="['search_option' ,{'active':searchOption}]">
        <div class=" flex bor_b choose">
          <div class="date_search flex"
               @click="dateShow= true">
            <span>{{value[0] |month}}月{{value[0] |day}}日</span>
            <span class="count">{{value|days}}晚</span>
            <span class="arrow"></span>
          </div>
          <div class="sort_search flex"
               @click="searchOption= !searchOption">
            <span class="mr20">{{sortList[sortIndex]}}</span>
            <span :class=" ['arrow',{'active':searchOption}]"></span>
          </div>
        </div>
        <ul class="sort_select">
          <li class="bor_b"
              :class="sortIndex == index ?'active':''"
              v-for="(item, index) in sortList"
              @click="sortM(index)"
              :key="index">{{item}}</li>
        </ul>
      </div>
      <div class="hotel_list"
           v-show="!nothingShow">
        <div class="hotel_item"
             v-for="(item,index) in hotelList"
             :key='index'
             @click="$router.push({path:'/hotel',query:{hotelId : item.id}})">
          <div class="hotel_img ">
            <img :src="item.file | imgUrl"
                 width="100%">
            <div class="tag flex start">
              <p class="price">￥{{item.price}} <span>起</span></p>
              <p class="">
                <img src="../../assets/image/loc.png"
                     width="10"
                     height="15"
                     class="mr10">
                <span v-show="item.distance"> {{item.distance}}Km</span>
                {{item.address}}
              </p>
            </div>
          </div>
          <p class="hotel_name "> {{item.name}}</p>

        </div>
      </div>
      <div class="nothing"
           v-show="nothingShow">
        <img src="../../assets/image/nothing.png">
      </div>
    </div>
    <div class="city"
         v-show="cityShow">
      <div class="mycity">
        我的城市：&nbsp;&nbsp;<span id="qyxs"
              class="cityname">{{addr&&addr.city}}</span>
      </div>
      <w-sortlist v-model="listData"
                  @click="select"
                  children="cities"
                  relkey="core"
                  label="name"></w-sortlist>
    </div>
    <popup v-model="dateShow">
      <inline-calendar v-model="value"
                       @on-change='choose'
                       disable-past>
      </inline-calendar>
    </popup>
  </div>

</template>
<script>
import { XInput, Group, InlineCalendar, Popup } from 'vux'
import { mapGetters, mapActions } from 'vuex'
import wSortlist from 'wenlist'
import * as API from '../../api'
export default {
  components: {
    XInput, Group, wSortlist, InlineCalendar, Popup
  },
  data () {
    return {
      value: [],
      hotelName: '',
      hotelList: '',
      sortList: ['距离优先', '高价优先', '低价优先'],
      sortIndex: 0,
      searchOption: false,
      cityShow: false,
      city: '全部',
      dateShow: false,
      listData: [],
      nothingShow: true,
      agu: {}
    }
  },
  computed: {
    ...mapGetters([
      'searchList', 'addr', 'date'
    ])
  },
  created () {
    console.log(this.date)
    console.log(this.addr)
    this.value[0] = this.date[0]
    this.value[1] = this.date[1]
    // 城市列表
    this.$http.get(API.city_lsit).then(res => {
      this.listData = res.data
    }).catch(err => {
      console.log(err)
    })

    if (this.$route.query.hotelName) {
      // search从搜索过来的
      console.log('搜索调用')
      this.agu.hotelName = this.$route.query.hotelName
      this.hotelName = this.$route.query.hotelName
    } else if (this.$route.params.type) {
      // 首页搜索过来的
      console.log('首页调用')
      this.city = this.$route.params.city
      this.agu = this.$route.params
    }
  },

  methods: {
    ...mapActions(['dateChoose']),
    select (data) {
      this.city = data.name
      this.cityShow = false
      this.agu.city = data.name
      console.log('城市调用')
      this.search(this.agu)
    },
    choose (value) {
      console.log('日期调用')
      if (this.value.length > 2) this.value.splice(0, 2)
      if (Date.parse(new Date(this.value[0])) > Date.parse(this.value[1])) this.value.splice(1, 1)
      if (this.value.length === 2) {
        this.dateShow = false
        this.search(this.agu)
        this.dateChoose(value)
      }
    },
    sortM (index) {
      console.log('排序调用')
      this.searchOption = false
      this.sortIndex = index
      this.agu.order = this.sortIndex
      this.search(this.agu)
    },
    submit () {
      console.log(this.hotelName)
      this.agu.hotelName = this.hotelName
      this.search(this.agu)
    },
    search (agu) {
      console.log(this.agu);
      console.log(this.addr);
      let searchData = {
        city: this.city || agu.city,
        startTime: this.date[0],
        endTime: this.date[1],
        hotelName: agu.hotelName,
        latitude: this.addr.latitude,
        longitude: this.addr.longitude,
        order: this.sortIndex
      }
      if (searchData.city === '全部') {
        searchData.city = ''
      }
      console.log('qingqiucna')
      console.log(searchData)
      this.$http.get(API.searchHotel, {
        params: searchData
      }).then(res => {
        if (res.data.hotelList.length) {
          this.nothingShow = false
          this.hotelList = res.data.hotelList
        } else {
          this.hotelList = []
          this.nothingShow = true
        }
      })
        .catch(err => {
          console.log(err)
          console.log('couoc')
        })
    }
  },

  mounted () {
  }

}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.header {
  padding: 10px;
  @extend .bg_fff;
  .search {
    margin: 10px 0;
    width: 70%;
    padding: 0 20px;
    height: 70px;
    line-height: 70px;
    @extend .bg_f2f;
    border-radius: 10px;
    .weui-cell {
      padding: 0;
      @extend .fz28;
      .searchimg {
        margin-right: 15px;
      }
    }
  }
}
.search_option {
  position: relative;
  z-index: 3;
  @extend .bg_fff;
  height: 82px;
  overflow: hidden;
  transition: all 0.5s;
  &.active {
    height: 330px;
  }
  .choose {
    height: 80px;
    div {
      @extend .fz28;
      width: 48%;
      &:first-child {
        border-right: 1px solid #e5e5e5;
        /*no*/
      }
      .count {
        @extend .border;
        border-radius: 20px;
        padding: 0 15px;
        margin: 0 20px;
      }
      .arrow {
        width: 15px;
        height: 15px;
        border-left: 2px solid #979797;
        border-bottom: 2px solid #979797;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        &.active {
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
          margin-bottom: -0.15625rem;
        }
      }
    }
  }
  .sort_select {
    width: 100%;

    li {
      position: relative;
      padding: 20px;
      @extend .bg_fff;
      @extend .fz28;
      &.active {
        color: #4285f6;
        &:after {
          content: "";
          position: absolute;
          width: 50px;
          height: 20px;
          right: 50px;
          bottom: 30px;
          background: url("../../assets/image/choosen.png") no-repeat 100%;
          background-size: 0.40625rem 0.265625rem;
        }
      }
    }
  }
}
.hotel_list {
  position: absolute;
  top: 182px;
  padding: 20px;
  @extend .bg_fff;
  .hotel_item {
    @extend .bor_b;
    // &:last-child {
    //   border: none;
    // }
    .hotel_img {
      position: relative;
      width: 100%;
      height: 400px;
      img {
        border-radius: 10px;
        height: 100%;
      }
      .tag {
        position: absolute;
        bottom: 0;
        @extend .col_fff;
        font-size: 26px;
        .price {
          width: 25%;
          text-align: center;
          padding: 20px;
          margin-right: 20px;
          background: rgba(0, 0, 0, 0.7);
          border-radius: 5px;
          span {
            font-size: 16px;
          }
        }
      }
    }
    .hotel_name {
      font-weight: bold;
      padding: 15px 0;
      color: #666;
    }
  }
}
</style>
